<template>
	<view class="index">
		<!-- 顶部搜索框 -->
		<nav-bars backState="2000" bgColor="#fff" fontColor="#000" title="找装修"></nav-bars>
		<!-- <nav-bars class="i_top" bgColor="#fff" fontColor="#000">
			<view class="i_tCan" slot="default">
				<view class="i_tInput">
					<view class="i_tIcon iconfont icon-search"></view>
					<input type="text" v-model="searchVal" @confirm="searchData" placeholder="搜索您感兴趣的内容吧"
						placeholder-class="placeholder" />
				</view>
			</view>
		</nav-bars> -->

		<!-- 内容 -->
		<view class="i_data">
			<!-- 搜索框 -->
			<view class="isearch">
				<view class="i_bSearch">
					<view class="i_bIcon"><view class="iconfont icon-search"></view></view>
					<view class="i_bClear" v-if="searchVal.length" @tap="searchVal = ''"><view class="iconfont icon-close"></view></view>
					<view class="i_bInput">
						<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData" placeholder="搜索您感兴趣的内容" placeholder-class="placeholder"/>
					</view>
				</view>
			</view>
			<view class="yopcom">
				<view class="i_com active" @click="pageHome('/pages/home/index/list')"><text>找装企</text><text class="nactive"></text></view>
				<view class="i_com"><text class="iconfontnow"></text></view>
				<view class="i_com" @click="goSkip('/pages_design/pages/design/index/index')"><text>找设计</text></view>
				<view class="i_com"><text class="iconfontnow"></text></view>
				<view class="i_com" @click="goSkip('/pages_two/pages/construction/list/index')"><text>找施工</text></view>
			</view>
			<!-- 版块 -->
			<!-- <view class="module">
				<view class="module_view" @click="GoIntroduce">
					<viwe class="module_title">7大版块 38项 工艺流程</viwe>
					<view class="module_des">
						<view>联坤智装平台工艺流程</view>
						<view>了解详情 <u-icon name="arrow-right-double" style="margin-left: 10rpx;"></u-icon>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 抡博 -->
			<view class="i_tSwiper">
				<swiper autoplay interval="4200" duration="300" :circular="true" @change='threeBannerChange'>
					<swiper-item v-for="(item,index) in banner" :key="index" v-if="index<3">
						<view class="i_tCont">
							<image :src="item.img"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="i_tDots">
					<view :class="['i_tDot', index == threeIndex ? 'active' : '']" v-for="(item,index) in banner"
						:key="index">
						<view class="i_tIcon"></view>
					</view>
				</view>
			</view>
			<view class="p_dList"
				style="border-bottom: 4rpx solid #f4f4f4;border-top: 4rpx solid #f4f4f4;margin-top: 24rpx;">
				<view>
					<view class="i_recomd">
						<view class="i_rCan">
							<view>
								<view class="i_rList">
									<view class="i_rItem" v-for="(item,index) in RecommendTeamList" :key="index" @tap="toDetail(item.id)">
										<view class="i_rImage">
											<image
												:src="item.avatar.path">
											</image>
										</view>
										<view class="i_rtitle">热门团队</view>
										<view class="i_rText omit-1">{{item.title}}</view>
										<view class="i_rFee">开业{{item.employ_year}}年 ｜ 方案{{item.case_num}}</view>
									</view>
									<!-- <view class="MoreList  omit-1" style="">
										<view class="MoreItem" style="">
											<text style="">查看更多</text>
											<u-icon color="#333" size="20"
												name="https://cos.ryz1620.com/liankun/static/goRight.png">
											</u-icon>
										</view>
									</view> -->
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- tab栏 -->
			<view class="i_dTabs" :style="{'top': (navHeight-2) + 'px'}">
				<view class="i_sen">
					<!-- // kind：综合  offer：区域  style：房型  price：价格 -->
					<view class="i_dtTab" :class="{'active': tabType === 'kind'}" @tap="tabToggle('kind')">
						<view class="i_dtContain">
							<view class="i_dtCan omit-1" :class="{'active': tabVal_kind !== null}">
								<view class="i_dtIcon1"></view>
								<text>{{tabVal_kind === null ? "综合" : tabLabel_kind}}</text>
							</view>
						</view>
					</view>
					<view class="i_dtTab" :class="{'active': tabType === 'price'}" @tap="tabToggle('price')">
						<view class="i_dtContain">
							<view class="i_dtCan" :class="{'active': tabVal_price !== null}">
								<view class="i_dtIcon2" :class="{'active': tabVal_price === 'ASC'}"></view>
								<view class="i_dtIcon3" :class="{'active': tabVal_price === 'DESC'}"></view>
								<text>价格</text>
							</view>
						</view>
					</view>
					<!-- <view class="i_dtTab" :class="{'active': tabType === 'offer'}" @tap="tabToggle('offer')">
						<view class="i_dtContain">
							<view class="i_dtCan omit-1" :class="{'active': tabVal_offer !== null}">
								<view class="i_dtIcon1"></view>
								<text>{{tabVal_offer === null ? "服务类型" : tabLabel_offer}}</text>
							</view>
						</view>
					</view> -->
					<view class="i_dtTab" :class="{'active': tabType === 'style'}" @tap="tabToggle('style')">
						<view class="i_dtContain">
							<view class="i_dtCan" :class="{'active': tabVal_style && tabVal_style.length}">
								<view class="i_dtIcon1"></view>
								<view class="i_dtIcon4" v-if="tabVal_style && tabVal_style.length">
									{{tabVal_style.length}}
								</view>
								<text>服务类型</text>
							</view>
						</view>
					</view>

				</view>
				<view class="i_mfixed">
					<!-- 筛选框 -->
					<view class="i_dSelect i_dSelect2" :class="{'active': tabShow}">
						<!-- <view class="i_dsBg" @tap="tabClose"></view> -->
						<!-- 类型: kind -->
						<view class="i_dsBox" :class="{'show': tabType === 'kind', 'hide': tabOldType === 'kind'}">
							<view class="i_dsList">
								<view v-for="item in tabList_kind" :key="item.value">
									<view class="i_dsItem" :class="{'active': tabVal_kind === item.value}"
										@click="tabSelect('kind', item.value, item.label)">
										<view class="i_dsIcon iconfont icon-selected"></view>
										<text>{{item.label}}</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 风格: style -->
						<view class="i_dsBox" :class="{'show': tabType === 'style', 'hide': tabOldType === 'style'}">
							<view class="i_dsTags">
								<view v-for="item in tabList_style" :key="item.value">
									<view class="i_dsTag" :class="{'active': item.select}"
										@tap="tabSelect('style', item.value)">
										<view class="i_dsTag-box">{{item.label}}</view>
									</view>
								</view>
							</view>
							<view class="i_dsBtns">
								<view class="i_dsReset" @tap="tabReset">重置</view>
								<view class="i_dsConfim" @tap="tabConfim">完成</view>
							</view>
						</view>
						<!-- 报价: offer -->
						<!-- <view class="i_dsBox" :class="{'show': tabType === 'offer', 'hide': tabOldType === 'offer'}">
							<view class="i_dsTags">
								<view v-for="(item,index) in tabSypeList" :key="item.value">
									<view class="i_dsTag" :class="{'active': item.select}"
										@tap="tabSelect('style',item.value)">
										<view class="i_dsTag-box">{{item.label}}</view>
									</view>
								</view>
							</view>
							<view class="i_dsBtns">
								<view class="i_dsReset" @tap="tabReset">重置</view>
								<view class="i_dsConfim" @tap="tabConfim">完成</view>
							</view>
						</view> -->
						<!-- 价格: price -->
						<view class="i_dsBox" :class="{'show': tabType === 'price', 'hide': tabOldType === 'price'}">
							<view class="i_dsList">
								<view v-for="item in tabList_price" :key="item.value">
									<view class="i_dsItem" :class="{'active': tabVal_price === item.value}"
										@tap="tabSelect('price', item.value, item.label)">
										<view class="i_dsIcon iconfont icon-selected"></view>
										<text>{{item.label}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 底部内容 -->
			<view class="i_dContain">
				<view class="i_dSelect" :class="{'active': tabShow}">
					<view class="i_dsBg" @tap="tabClose" v-if="tabShow"></view>
				</view>
				<!-- 数据列表 -->
				<scroll-view class="i_dList" :scroll-y="isScrollBtm" @scrolltolower="nextPage">
					<view class="no-card" v-if="list.length==0">
						<image src="https://manager.ryz1620.com/static/my/sm.png"></image>
						<text>暂无施工队信息~</text>
					</view>
					<view class="i_dItem" v-for="(items, index) in list" :key="items.id" @tap="toDetail(items.id)">
						<!-- 头像 -->
						<view class="i_dHeadimg">
							<image
								:src="items.avatar.path || 'https://cos.ryz1620.com/liankun/static/IMG280.png'">
							</image>
						</view>
						<view class="i_dCont">
							<view class="i_dUser">
								<!-- 报价 -->
								<view class="i_duFee">
									<text>{{items.start_offer + '-' + items.end_offer}}</text><text
										class="i_duUnit">元/m²</text>
								</view>
								<!-- 名称 -->
								<view class="i_duName">{{items.title}}</view>
								<!-- 简介 -->
								<view class="i_duRemark">方案{{items.case_num}} | 评价{{items.comment_num}}</view>
							</view>
							<!-- 风格 -->
							<view class="i_dTags" v-if="items.design_style && items.design_style.length">
								<view class="i_dtTag" v-for="tag in items.design_style" :key="tag.name">{{tag.name}}
								</view>
							</view>
							<!-- 设计作品图片 -->
							<view class="i_dMedia" v-if="items.case_list.length > 0">
								<view class="i_dmImgs" v-for="(item1,index1) in items.case_list" :key="index1" v-if="index1==0">
									<view class="i_dmImgs-item" v-for="(img,indexx) in item1.thumb_url" :key="indexx"
										v-if="indexx<2"
										@tap.stop="preview(index,item1.thumb_url)">
										<image :src="img.path"></image>
									</view>
								</view>
							</view>
							<!-- 关注 -->
							<view class="i_dInfo">
								<view class="i_diFocus" @tap.stop="focusAuth(items.id, items.isFocus, index)">
									<view class="i_diFocus-icon" v-if="items.isFocus">
										<image src="/static/common/icon_stars.png"></image>
									</view>
									<view class="i_diFocus-icon" v-else>
										<image src="/static/common/icon_stars2.png"></image>
									</view>
									<text>{{items.fans_num}}人关注</text>
								</view>
							</view>
						</view>
					</view>
					<view style="text-align: center;color: #999;line-height: 80rpx;">到底了~</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_design from '@/service/team.js'
	import service_value from '@/service/teamFilter.js'
	import service_recommend from '@/service/recommend.js'
	import service_decoration from '@/service/decoration.js'
	export default {
		data() {
			return {
				list: [],
				searchVal: '',
				isSearch: false,
				pageCurrent: 1,
				pageLoading: false,
				// tab栏=====
				tabType: null, // kind：类型  offer：报价  style：风格  price：价格   // // kind：综合  offer：区域  style：房型  price：价格
				tabOldType: null,
				tabShow: false,
				tabEdit_style: false,
				// value
				tabVal_kind: null,
				tabVal_offer: null,
				tabVal_style: null,
				tabVal_price: null,
				// label
				tabLabel_kind: '',
				tabLabel_offer: '',
				// 筛选框筛选条件
				tabList_kind: [{
						value: null,
						label: '综合'
					},
					{
						value: 'comment',
						label: '评价数从高到低'
					},
					{
						value: 'case',
						label: '方案数从高到低'
					},
				],
				tabList_price: [{
						value: null,
						label: '全部'
					},
					{
						value: 'asc',
						label: '价格从低到高'
					},
					{
						value: 'desc',
						label: '价格从高到低'
					},
				],
				tabList_style: [],
				banner: [],
				// 轮播图
				threeIndex: 0,
				Indexs: 0,
				// 是否滑动到底部
				isScrollBtm: false,
				isScrollFlag: false,
				// tabList_offer: [
				// 	{value:'',label:''},
				// ],
				// tabList_style: null,
				RecommendTeamList:[],
			}
		},

		computed: {
			navHeight() {
				var navHeights = uni.getStorageSync('StatusBarHeight')
				return navHeights.height
			}, // Nav栏高度
			// tabList_style() {
			// 	return this.$store.state.teamFilter.filtrate_style
			// },
			// tabList_offer() {
			// 	return this.$store.state.teamFilter.filtrate_offer
			// },
		},
		created() {
			// this.getOptions()	
		},
		// components: {
		// 	navBar
		// },
		onShow() {
			this.$utils.getUrl()
			this.pageCurrent = 1
			this.RecommendTeamList = []
			this.list = []
			this.getOptions()
			this.getbanner()
			this.getRecommendData()
		},

		onLoad() {
			
		},
		onReachBottom() {
			if (!this.pageLoading) {
				this.pageCurrent++
				this.getList()
			}
		},
		methods: {
			// 获取推荐信息
			getRecommendData(){
				service_decoration.getRecommendList({
						//RecommendTeamList
					})
					.then(res => {
						if (res.code == 1) {
							console.log(res);
							var data = res.data
							this.getList()
							this.RecommendTeamList = data
						}
					})
			},
			pageHome(url){
				uni.switchTab({
					url: url
				});
			},
			goSkip(url){
				uni.navigateTo({
					url: url
				});
			},
			// 获取筛选条件
			getOptions() {
				service_value.getOptions({
						// type: 25
					})
					.then(res => {
						if (res.code == 1) {
							// console.log(res.data.service_type);
							var resArr = res.data.service_type
							var newObj = {
								id: null,
								name: '全部'
							}
							resArr.unshift(newObj)
							resArr.forEach((item, index) => {
								// console.log(item);
								item.select = false
								item.value = item.id
								item.label = item.name
							})
							this.tabList_style = resArr
						}
					})
			},
			// 获取banner
			getbanner() {
				service_design.getbanner({
						type: 25
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data
							this.banner = data
						}
					})
			},

			// 3D-轮播图切换
			threeBannerChange(e) {
				this.threeIndex = e.detail.current
			},
			threeBanners(e) {
				this.Indexs = e.detail.current
			},
			// 获取数据列表
			getList() {
				if (!this.pageLoading) {
					this.pageLoading = true
					// 处理数据tabList_style
					let tabVal_style = this.tabVal_style
					let style = ''
					if (tabVal_style && tabVal_style.length && tabVal_style[0]) {
						style = tabVal_style.join(',')
					}
					let tabVal_kind = this.tabVal_kind
					// if (this.tabVal_kind == 0) {
					// 	tabVal_kind = ""
					// } else {
					// 	tabVal_kind = this.tabVal_kind
					// }
					// console.log(tabVal_kind);
					// 请求参数
					let params = {
						keyword: this.searchVal.trim(), //关键字(施工队名称)
						// userId: 1, 
						service_type: style, //服务类型(多个逗号,分割：1,2)
						comment_num: tabVal_kind == 'comment' ? 'desc' : '', //评论数(asc从低到高,desc从高到低)
						case_num: tabVal_kind == 'case' ? 'desc' : '', //案例数(asc从低到高,desc从高到低)
						offer: this.tabVal_price, //价格(asc从低到高,desc从高到低)
						page: this.pageCurrent //页数(默认:1)
					}
					service_decoration.getList(params)
						.then(res => {
							this.pageLoading = false

							if (res.code == 1) {
								let data = res.data
								let list = this.list || []

								// 处理数据
								for (let i = 0; i < data.length; i++) {
									data[i].isFocus = data[i].follow_status == 1 ? true : false // 0: 未关注  1：关注

									list.push(data[i])
								}

								this.list = list
								this.pageCurrent++
							}
						})
						.catch(err => {
							this.pageLoading = false
							this.$utils.showErr()
						})
				}
			},

			// 下一页
			nextPage(e) {},

			// 关注=====
			focusAuth(id, focus, index) {
				let status = ''
				if (focus) {
					status = 0
				} else {
					status = 1
				}
				service_decoration.focusDecoration({
						// userId: 1,
						decoration_id: id,
						status: status
					}) // focus: true关注 false取消关注
					.then(res => {
						if (res.code == 1) {
							this.list[index].isFocus = !focus
							this.list[index].fans_num += !focus ? 1 : -1
						} else {
							this.$utils.showErr({
								title: '操作失败'
							})
						}
					})
					.catch(err => {
						this.focusLoading = false
						this.$utils.showErr()
					})
			},

			// 跳转装修公司详情页面
			toDetail(decorationId) {
				uni.navigateTo({
					url: '/pages_decoration/pages/decoration/detailes/index?decorationId=' + decorationId
					// url: '/pages_design/pages/design/personal/personal?designerId=' + designerId
				})
			},
			GoIntroduce() {
				uni.navigateTo({
					url: '/pages_two/pages/construction/introduce/index'
				})
			},
			// 搜索=====
			searchData() {
				this.pageCurrent = 0
				this.isSearch = true
				this.list = []
				this.getList()
			},

			// tab栏操作=======
			// 切换tab栏
			tabToggle(type) {
				if (type != this.tabType) {
					this.tabOldType = this.tabType
					this.tabType = type
					this.tabShow = true
				}
				// 点击同一tab => 关闭tab栏
				else {
					this.tabClose()
				}
			},

			// 关闭tab栏
			tabClose() {
				// 修改风格数据 => 关闭前保存
				if (this.tabEdit_style) {
					this.tabConfim()
				} else {
					this.tabOldType = null
					this.tabType = null
					this.tabShow = false
				}
			},

			// 选择tab
			tabSelect(type, value, label) {
				// console.log(type);
				// console.log(value);
				// console.log(label);
				if (type === 'style') {
					let tabList = this.tabList_style
					let disposeWay = value === null ? 'all' : 'it' // all: 选中全部选项 it: 选中其他选项
					let disposeAll = false
					let disposeIt = false

					for (let i = 0; i < tabList.length; i++) {
						// 选中全部选项 => 清空其他选项
						if (disposeWay === 'all') {
							if (tabList[i].value === null) {
								tabList[i].select = !tabList[i].select
							} else {
								tabList[i].select = false
							}
						}
						// 选中其他选项 => 取消全部选项选中状态
						else {
							if (tabList[i].value === null) {
								tabList[i].select = false
								disposeAll = true
							}
							if (tabList[i].value === value) {
								tabList[i].select = !tabList[i].select
								disposeIt = true
							}
							if (disposeAll && disposeIt) {
								break
							}
						}
					}

					// 修改了风格 => 关闭前保存数据
					this.tabEdit_style = true
				} else {
					this["tabVal_" + type] = value
					this["tabLabel_" + type] = label

					setTimeout(() => {
						this.searchData()
						this.tabClose()
					}, 500)
				}
			},

			// 重置风格
			tabReset() {
				let tabList = this.tabList_style

				for (let i = 0; i < tabList.length; i++) {
					tabList[i].select = false
				}

				// 修改了风格 => 关闭前保存数据
				this.tabEdit_style = true
			},
			// 预览图片
			preview(index, urls) {
				let img_url = []
				for (let i = 0; i < urls.length; i++) {
					img_url.push(
						urls[i].path
					);
				}
				uni.previewImage({
					urls: img_url,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			previews(urls) {
				let img_url = []
				img_url.push(
					urls
				);
				uni.previewImage({
					urls: img_url,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 确定风格
			tabConfim() {
				let tabList = this.tabList_style
				let select = []
				for (let i = 0; i < tabList.length; i++) {
					if (tabList[i].select) {
						select.push(tabList[i].value)
					}
				}
				this.tabVal_style = select.length ? select : null
				this.tabEdit_style = false
				// tabVal_offer
				// console.log(select);

				setTimeout(() => {
					this.searchData()
					this.tabClose()
				}, 500)
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import '../../iconfont.css';

	.index {
		display: flex;
		flex-flow: column;
	}

	.i_recomd {
		// margin-top: 24rpx;

		.i_rOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 72rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;

			.i_roIcon {
				width: 32rpx;
				height: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
			}
		}

		.i_tOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 64rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;

			.i_toIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				color: #6c6c6c;
				font-size: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
			}
		}

		.i_rTitle {
			height: 110rpx;
			line-height: 122rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding-left: 32rpx;
		}

		.i_rCan {
			overflow: hidden;
		}

		.i_rList {
			// height: 368rpx; 
			padding: 0 28rpx;
			white-space: nowrap;
			overflow-x: auto;
			/* text-align: start; */
			// display: flex;
			// align-items: flex-end;
			padding-bottom: 24rpx;

			.MoreList {
				width: 84rpx;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(195, 171, 124, 0.38) 100%);
				height: 306rpx;
				// display: flex;
				// align-items: center;
				// justify-content: center;

				// .MoreItem {
				// 	width: 84rpx;
				// 	display: flex;
				// 	align-items: center;
				// 	flex-direction: column;
				// 	justify-content: center;

				// 	text {
				// 		writing-mode: vertical-lr;
				// 		text-align: center;
				// 		font-size: 28rpx;
				// 		font-weight: 400;
				// 		color: #333333;
				// 		margin-bottom: 4rpx;
				// 	}
				// }
			}
		}

		.i_rItem {
			display: inline-block;
			margin-right: 24rpx;
			position: relative;
			background-color: #fff;
			margin-top: 96rpx;
			padding: 0 28rpx;
			width: 224rpx;
			height: 220rpx;
			box-shadow: 0rpx 6rpx 16rpx rgba(0, 0, 0, 0.06);

			&:nth-last-child(1) {
				margin-right: 0;
			}
		}

		.i_rImage {
			width: 144rpx;
			height: 144rpx;
			overflow: hidden;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.i_rtitle {
			position: absolute;
			top: 56rpx;
			left: 50%;
			transform: translate(-50%, 0%);
			line-height: 20px;
			font-size: 18rpx;
			color: #fff;
			background: #C3AB7C;
			padding: 0rpx 16rpx;
			border-radius: 4rpx;
			font-weight: 500;
		}

		.i_rText {
			margin-top: 112rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 48rpx;
		}

		.i_rFee {
			margin-bottom: 28rpx;
			text-align: center;
			font-size: 20rpx;
			font-weight: 400;
			line-height: 44rpx;
			color: #939393;
		}
	}

	// 顶部搜索框=====
	.index .i_top {
		position: relative;
		z-index: 999;
		background: #fff;

		.i_tCan {
			width: 100%;
			height: 66rpx;
			// padding-left: 32rpx;
			padding-right: 24rpx;
			/* #ifndef APP-PLUS-NVUE */
			// margin-left: 34rpx;
			width: 500rpx;
			/* #endif */
			flex: 1;
			/*#ifdef H5 || MP-WEIXIN*/
			width: 400rpx;
			/*#endif*/
		}

		.i_tBg {
			width: 100vw;
			height: 500rpx;
			background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);
			position: fixed;
			top: 0;
			left: 0;
		}

		.i_tInput {
			height: 66rpx;
			border-radius: 34rpx;
			background: #F6F7FB;
			position: relative;
			opacity: .8;

			&>input {
				width: 100%;
				height: 100%;
				font-size: 24rpx;
				padding-left: 72rpx;
			}
		}

		.i_tIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #6c6c6c;
			font-size: 32rpx;
			position: absolute;
			top: 18rpx;
			left: 32rpx;
		}
	}

	.module {
		margin: 0 30rpx 24rpx 30rpx;
		box-sizing: border-box;

		.module_view {
			width: 100%;
			height: 124rpx;
			background: url(https://cos.ryz1620.com/liankun/static/builderteam/list_bg.png);
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30rpx;
			background-size: 100% 100%;

			.module_title {
				margin-bottom: 10rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.module_des {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #666;
				width: 100%;
			}
		}
	}

	// 内容=====
	.index .i_data {
		min-height: 100vh;
		background: #fff;
		position: relative;
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	// tab栏==
	.index .i_data .i_dTabs {
		height: 114rpx;
		background: #fff;
		position: relative;
		position: sticky;
		top: 0;
		z-index: 20;

		.i_dtTab {
			height: 114rpx;
			color: #939393;
			font-size: 24rpx;
			overflow: hidden;
			display: flex;
			flex: 1;

			.i_dtContain {
				width: 100%;
				height: 100%;
				padding-left: 8rpx;
				padding-right: 8rpx;
				overflow: hidden;
				display: flex;
				justify-content: center;
			}

			&:nth-child(1) .i_dtContain {
				padding-left: 36rpx;
				justify-content: flex-start;
			}

			&:nth-last-child(1) .i_dtContain {
				padding-right: 36rpx;
				justify-content: flex-end;
			}

			.i_dtCan {
				height: 114rpx;
				line-height: 114rpx;
				text-align: center;
				padding-right: 20rpx;
				position: relative;

				&.active {
					color: #a98f68;
				}
			}

			.i_dtIcon1,
			.i_dtIcon2,
			.i_dtIcon3 {
				width: 0;
				height: 0;
				border: 6rpx solid transparent;
				border-top-color: #6c6c6c;
				position: absolute;
				top: 50%;
				right: 0;
			}

			.i_dtIcon1 {
				top: 54rpx;
				transition: transform .3s;
				transform: rotate(0);
				transform-origin: 50% 25%;
			}

			.i_dtIcon2 {
				border-color: transparent;
				border-bottom-color: #ccc;
				top: 42rpx;

				&.active {
					border-bottom-color: #6c6c6c;
				}
			}

			.i_dtIcon3 {
				border-top-color: #ccc;
				top: 62rpx;

				&.active {
					border-top-color: #6c6c6c;
				}
			}

			.i_dtIcon4 {
				height: 24rpx;
				line-height: 24rpx;
				color: #fff;
				font-size: 20rpx;
				padding: 0 6rpx;
				margin: -12rpx 0 0 -12rpx;
				border-radius: 12rpx;
				background: #a98f68;
				position: absolute;
				top: 50%;
				left: 100%;
			}

			// tab选中效果
			&.active {
				color: #a98f68;

				.i_dtIcon1 {
					border-top-color: #a98f68;
					transform: rotate(180deg);
					transform-origin: 50% 25%;
				}
			}
		}
	}

	// 数据列表==
	.index .i_data .i_dContain {
		position: relative;
		overflow: hidden;
		flex: 1;
	}

	.index .i_data .i_dList {
		width: 100%;
		height: 100%;
		padding-left: 32rpx;
		background: #fff;

		.i_dItem {
			padding: 40rpx 0 24rpx;
			position: relative;
			border-bottom: 1px #f9f9f9 solid;

			&:nth-child(1) {
				padding-top: 20rpx
			}

			&::after {
				content: "";
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 32rpx;
				transform: scaleY(.5);
			}

			&:nth-last-child(1)::after {
				content: none;
			}
		}

		.i_dHeadimg {
			width: 90rpx;
			height: 90rpx;
			margin-right: 16rpx;
			border-radius: 50%;
			background: #f0f0f0;
			overflow: hidden;
			float: left;
		}

		.i_dCont {
			overflow: hidden;
		}

		// 用户信息
		.i_dUser {
			.i_duFee {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 10rpx;
				margin-right: 36rpx;
				float: right;
			}

			.i_duUnit {
				font-size: 20rpx;
				font-weight: normal;
				padding-left: 8rpx;
			}

			.i_duName {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				padding-left: 4rpx;
				margin-top: 8rpx;
			}

			.i_duRemark {
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				color: #939393;
				padding-left: 4rpx;
			}
		}

		// 标签
		.i_dTags {
			line-height: 0;
			padding: 10rpx 32rpx 12rpx 0;

			.i_dtTag {
				height: 36rpx;
				line-height: 36rpx;
				color: #a98f68;
				font-size: 20rpx;
				padding: 0 20rpx;
				margin-top: 6rpx;
				margin-right: 8rpx;
				border-radius: 18rpx;
				background: #f9f6f3;
				display: inline-block;
			}
		}

		// 媒体
		.i_dMedia {
			margin-top: 8rpx;

			.i_dmImgs {
				line-height: 0;
			}

			.i_dmImgs-item {
				width: 188rpx;
				height: 188rpx;
				margin-top: 8rpx;
				margin-right: 8rpx;
				border-radius: 4rpx;
				background: #f0f0f0;
				display: inline-block;
				overflow: hidden;
			}
		}

		// 关注
		.i_dInfo {
			overflow: hidden;

			.i_diFocus {
				height: 66rpx;
				color: #939393;
				font-size: 24rpx;
				padding: 0 36rpx;
				float: right;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.i_diFocus-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 4rpx;
				display: inline-block;
			}
		}
	}

	// 筛选框==
	// 动画效果：
	// 画板，隐藏阶段，.4s后隐藏画板
	// 背景：以.4s时间，以opacity显示or隐藏
	// 弹窗：以.4s时间，【展示】：
	//     transform: translateY(-100%);
	//    【收起】：
	//     transform: translateY(0);
	.i_dSelect {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		visibility: hidden;
		transition: visibility .3s;

		&.active {
			visibility: visible;

			.i_dsBg {
				opacity: 1;
			}
		}

		// 背景
		.i_dsBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .6);
			opacity: 0;
			transition: opacity .3s;
		}

		// 弹窗
		.i_dsBox {
			width: 100%;
			border-radius: 0 0 20rpx 20rpx;
			background: #fff;
			position: absolute;
			top: 0;
			left: 0;
			overflow: hidden;
			transform: translateY(-100%);
			transition: transform .3s;

			&.hide {
				transform: translateY(-100%);
			}

			&.show {
				transform: translateY(0);
			}
		}

		.i_dsList {
			padding: 14rpx 0 26rpx;
		}

		.i_dsItem {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding-left: 36rpx;
			position: relative;

			&.active {
				color: #a98f68;
			}

			&.active .i_dsIcon {
				display: block;
			}

			.i_dsIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #a58f6d;
				font-size: 32rpx;
				position: absolute;
				top: 14rpx;
				right: 32rpx;
				display: none;
			}
		}

		.i_dsTags {
			padding: 14rpx 22rpx;
			overflow: hidden;

			.i_dsTag {
				padding: 14rpx 10rpx;
				float: left;

				.i_dsTag-box {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					padding: 0 18rpx 0 20rpx;
					background: #f6f7fb;
					border-radius: 26rpx;
				}

				&.active .i_dsTag-box {
					color: #a98f68;
					background: #f9f6f3;
				}

				&:active .i_dsTag-box {
					opacity: .88;
				}
			}
		}

		.i_dsBtns {
			height: 88rpx;
			margin-top: 26rpx;
			display: flex;

			.i_dsReset,
			.i_dsConfim {
				height: 88rpx;
				font-size: 24rpx;
				background: #f6f7fb;
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;

				&:active {
					opacity: .88;
				}
			}

			.i_dsConfim {
				color: #fff;
				background: #a98f68;
			}
		}
	}

	.no-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 40rpx;
	}

	.no-title {
		padding: 30rpx 0;
	}

	.no-card>text {
		font-size: 24rpx;
		color: #999;
	}

	.no-bnt {
		padding: 10rpx 20rpx;
		margin: 20rpx;
		border: 2rpx solid #eee;
		font-size: 26rpx;
		background-color: #fff;
	}

	.no-card image {
		height: 240rpx;
		width: 240rpx;
		padding: 40rpx;
	}

	.yopcom {
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		background: #fff;
		border-top: 1px #fff solid;
		line-height: 100rpx;
		font-weight: 400;
		padding: 0 30rpx;
		// color: #6C6C6C;

		.i_com {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			vertical-align: middle;
			font-size: 34rpx;
			position: relative;
			text {
				font-size: 32rpx;
				color: #8E9195 ;
			}
		}
		.active{
			text{
				color: #000;
			}
		}
	}

	.i_tSwiper {
		margin: 0 30rpx;
		height: 200rpx;
		position: relative;
	}

	.i_tDots {
		width: 100%;
		position: absolute;
		bottom: 8rpx;
		left: 0;
		display: flex;
		justify-content: center;
	}

	.i_tDot {
		width: 24rpx;
		height: 36rpx;

		&.active .i_tIcon {
			background: #ffd425;
		}

		.i_tIcon {
			width: 12rpx;
			height: 12rpx;
			margin: 12rpx auto 0;
			border-radius: 50%;
			background: rgba(255, 255, 255, .5);
		}
	}

	.i_tCont {
		height: 100%;
		border-radius: 10rpx;
		background: #f6f7fb;
		position: relative;
		overflow: hidden;
	}

	.i_tBtn {
		width: 102rpx;
		height: 102rpx;
		background: rgba(0, 0, 0, .4);
		border: 1px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.i_tbImg {
		width: 42rpx;
		height: 42rpx;
		margin: 20rpx auto 0;
	}

	.i_tbTxt {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 58rpx;
		left: 0;
	}

	.i_sen {
		display: flex;
		justify-content: space-between;
	}

	.i_mfixed {
		position: relative;
		display: block;
		width: 100%;

		.i_dSelect2 {
			.i_dsBox {
				display: none;
			}

			.show {
				display: block;
			}
		}
	}
// 搜索框
			.i_bSearch {width: 686rpx;height: 72rpx;margin: 10rpx auto 0;border-radius: 32rpx;background: #F5F5F5;position: relative;
				.i_bIcon {height: 72rpx;line-height: 72rpx;color: #A7ABB1;font-size: 32rpx;padding-left: 28rpx;position: absolute;top: 0;left: 0;}
				.i_bClear {width: 66rpx;height: 72rpx;line-height: 72rpx;text-align: center;color: #A7ABB1;font-size: 32rpx;position: absolute;top: 0;right: 0;}
				.i_bInput {height: 100%;padding: 0 68rpx;
					& > input {height: 100%;color:#A7ABB1;}
				}
			}
			.isearch{
				width: 100%;
			}	
	.iconfontnow{
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background: #D5BFA1;
	}
	.nactive{
		position: absolute;
		bottom:15rpx;
		width: 30rpx;
		left: 50%;
		margin-left: -15rpx;
		height: 8rpx;
		border-radius: 5rpx;
		background: #D1AC7A;
	}
</style>
